:root {
    --background: linear-gradient(0deg, #f3f0f7, #ebe8ff);
    --foreground: #3d2994;

    --anchor-foreground: #4c3da1;
    --anchor-background: #d8d4ff;

    --button-background: #5b34e7;
    --button-background-hover: #303030;

    --code-background: #300088;
    --code-foreground: #d8d4ff;

    --box-background: #fff;
    --box-background-hover: #dad9e6;
    --box-foreground: #190088;
    --box-border: 4px solid #fff;
    --box-shadow: 2px 2px 0 0 #aaa;

    --box-tab-background: #c9c2ef;
    --box-tab-foreground: #240088;

    --options-background: linear-gradient(0deg, #d7d4eb 95%, #89859b);
    --options-border: #5b597e;

    --showcase-button-background: #4a4a80;
    --showcase-button-background-hover: #6566b6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: linear-gradient(0deg, #262626, #202020);
        --foreground: #ffffff;

        --button-background: #9698ff;
        --button-background-hover: #7476d1;
        --button-foreground: #23232e;

        --anchor-foreground: #9698ff;
        --anchor-background: #23232e;

        --code-background: #9698ff;
        --code-foreground: #252142;

        --box-background: #3a3a3a;
        --box-background-hover: #414141;
        --box-foreground: #9698ff;
        --box-border: 4px solid #3a3a3a;
        --box-shadow: 2px 2px 0 0 #181818;

        --box-tab-background: #9698ff;
        --box-tab-foreground: #23232e;

        --options-background: linear-gradient(0deg, #3a3a3a 95%, #202020);
        --options-border: #221a1a;
    }
}